<template>
    <div>

        <el-dialog v-model="props.FastVisible" title="快速改价 " @close="handleFastClose" width="40%">
            <el-table :data="props.productList" style="height: calc(100vh - 640px);margin: 10px 0;">
                <el-table-column width="150">
                    <template #default="scope">
                        <image-preview :src="scope.row.newImage" :width="100" :height="80" />
                    </template>
                </el-table-column>
                <el-table-column label="商品名称">
                    <template #default="scope">
                        <el-text line-clamp="3">{{ scope.row.name }}</el-text>
                    </template>
                </el-table-column>
                <el-table-column prop="discountedPrice" align="center">
                    <template #header="scope">
                        划线价（{{ productUnit }}）
                    </template>
                </el-table-column>
                <el-table-column prop="price" align="center">
                    <template #header="scope">
                        销售价（{{ productUnit }}）
                    </template>
                </el-table-column>
            </el-table>
            <el-descriptions title="批量改价" />
            <el-form :model="batchForm" label-width="auto" label-position="left" ref="fastPriceRef" :rules="publicRules">
                <el-form-item label="修改方式" prop="editPriceType" required style="width: 390px">
                    <el-select v-model="batchForm.editPriceType" @change="changeEditWay">
                        <el-option v-for="item in editWay" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="修改类型" prop="increased" required>
                    <el-radio-group v-model="batchForm.increased">
                        <el-radio v-for="item in editType" :key="item.value" :value="item.value">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="销售价变更" prop="salePriceSpace" required>
                    <el-input style="width: 300px" type="number" v-model="batchForm.salePriceSpace">
                        <template #append v-if="priceUnit">{{ priceUnit }}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="划线价变更" prop="originalPriceSpace" required>
                    <el-input style="width: 300px" type="number" v-model="batchForm.originalPriceSpace">
                        <template #append v-if="priceUnit">{{ priceUnit }}</template>
                    </el-input>
                </el-form-item>
            </el-form>



            <template #footer>
                <el-button type="primary" @click="handleFastSure"> 确定 </el-button>
                <el-button @click="handleFastClose">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["handleFastClose", "handleFastSure"]);
const priceUnit = ref(""); //单位
const productUnit = ref(""); //单位

const props = defineProps({
    FastVisible: {
        type: Boolean,
        default: false,
    },
    websiteId: {
        type: [String, Number],
        default: "",
    },
    productList: {
        type: Array,
        default: [],
    }
});
const batchForm = ref({
    websiteId: Number(props.websiteId),
    editPriceType: "Fixed", //编辑价格类型 EditPriceType Fixed固定值/Percent百分比
    increased: true, //价格是否上涨 true 上涨 false 下降
    salePriceSpace: 0, //销售价格范围
    originalPriceSpace: 0, //划线价格范围
});


watch(
    () => props.FastVisible,
    () => {
        if (!props.FastVisible) return;
        console.log(props.productList);
        getBasics();
    }
);
const getBasics = () => {
    site.general
        .sitewebsiteGetbyid({
            pathParams: {
                id: Number(props.websiteId),
            },
        })
        .then((res) => {
            //基础信息==》货币列表
            if (res.code === 200) {
                priceUnit.value = res.data.currency.description;
                productUnit.value = res.data.currency.description;
            }
        });
};
const handleFastSure = () => {
    proxy.$refs["fastPriceRef"].validate((valid) => {
        if (valid) {
            site.general.sitewebsitemoduleEditproductskulist(
                {
                    data: batchForm.value
                }
            ).then(res => {
                if (res.code === 200) {
                    proxy.$modal.msgSuccess(res.message);
                    priceUnit.value = ''
                    productUnit.value = ''
                    proxy.resetForm("fastPriceRef");
                    emits('handleFastSure')
                }
            })
        }
    })
}
const handleFastClose = () => {
    proxy.resetForm("fastPriceRef");
    priceUnit.value = ''
    productUnit.value = ''
    emits('handleFastClose')
}
const changeEditWay = (e) => {
    if (e === 'Percent') {
        priceUnit.value = '%'
    } else {
        getBasics()
    }
}
const editWay = reactive([
    {
        label: "固定值",
        value: "Fixed",
    },
    {
        label: "百分比",
        value: "Percent",
    },
]);
const editType = reactive([
    {
        label: "增加",
        value: true,
    },
    {
        label: "减少",
        value: false,
    },
]);
const publicRules = reactive({
    salePriceSpace: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        }, {
            pattern: /^(0|[1-9]\d*)(\.\d{0,2})?$/,
            message: "请正确输入",
            trigger: "blur",
        },
    ],
    originalPriceSpace: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        },
        {
            pattern: /^(0|[1-9]\d*)(\.\d{0,2})?$/,
            message: "请正确输入",
            trigger: "blur",
        },
    ],
})
</script>